<!--
 * @Descripttion: 
 * @version: v1.0
 * @Author: baidongsheng
 * @Date: 2021-12-07 18:49:39
 * @LastEditors: Fu Zhuohang
 * @LastEditTime: 2022-02-28 15:25:44
-->

<template>
  <div class="font-setting">
    <div class="font-setting-search">
      <a-input-search :placeholder="$t('cloudpivot.list.pc.placeInputSearch')" @search="onSearch" 
      allowClear
      @change="inputChange"/>
    </div>
    <div class="drag-box">
    <Draggable
        :list="columns"
        :options="dragOptions"
        @update="listChange"
        >
      <div class="drag-box-li" v-for="(item, index) in columns" :key="index">
        <div class="drag-box-left">
          <i class="icon aufontAll h-icon-all-drag"></i>
          <template v-if="isSystemFont(item.vcTitle)">
            <span :title="isChinese ? item.vcTitle : zhToen[item.vcTitle]">{{ isChinese ? item.vcTitle : zhToen[item.vcTitle] }}</span>
          </template>
          <template v-else>
            <span :title="isChinese ? item.vcTitle : item.name_i18n[$i18n.locale]">{{ isChinese ? item.vcTitle : item.name_i18n[$i18n.locale] || JSON.parse(item.name_i18n)[$i18n.locale] }}</span>
          </template>
        </div>
        <div class="drag-box-right">
          <a-switch v-model="item.isShow" @change="onChange($event,item)" size="small" />
        </div>
      </div>
     </Draggable>
    </div>
  </div>
</template>
<script lang='ts'>
import { Input, Switch } from "@h3/antd-vue";
import { Component, Prop, Vue } from "vue-property-decorator";
import Draggable from 'vuedraggable';
import zhToen from '../../locales/zhToEn';

@Component({
  name: "font-setting",
  components: {
    AInput: Input,
    AInputSearch: Input.Search,
    ASwitch: Switch,
    Draggable,
  },
})
export default class FontSetting extends Vue {
  
  @Prop() columns !: Array<any>;

  get isChinese() {
    return !(this.$i18n.locale && this.$i18n.locale === "en");
  }
 
  cusColumns:any[] = [];
      // 拖拽排序配置
  dragOptions: any = {
    animation: 150,
    ghostClass: 'ghostClass',
    fallbackClass: 'dragClass',
    touchStartThreshold: 20,
    delay: 50
  };

  listChange(e){
      this.$emit('confirm', this.columns);
  }

  onChange(checked,item) {
     this.$emit('confirm', this.columns);
  }

  inputChange(e){
      console.log(e.target.value);
      if(e.target.value.length<1){//清空还原
           this.$emit('recovery');
      }
      
  }

  zhToen:any = {}
  created(){
    this.zhToen = zhToen;
  }

  isSystemFont(font: string){
    const keys = Object.keys(zhToen)
    return keys.includes(font);
  }

  onSearch(e) {
    if(e.length<1)return;
    this.$emit('search', e);
  }
}
</script>
<style lang='less' scoped>
.font-setting {
  width: 244px;
  height: 400px;
  padding-top: 16px;
  &-search{
      padding: 0 16px;
      /deep/.ant-input-suffix{
        color: rgba(17, 18, 24, 0.25);
      }
  }
  .drag-box {
    max-height: 350px;
    overflow-y: scroll;
    padding: 0 2px 0 8px;
    &-right {
      display: felx;
    }
    &-li {
      display: flex;
      justify-content: space-between;
      height: 36px;
      padding: 0 8px;
      align-items: center;
      cursor: grab;
      border-radius: 4px;
      &:hover{
          background-color: rgba(0, 30, 116, 0.06);
      }
      &:active{
         box-shadow: 0px 2px 8px 0px rgba(168, 175, 186, 0.5);
         background-color: #fff;
      }
      &:first-child{
        margin-top: 8px;
      }

      .drag-box-left {
        flex: 1;
        i {
          font-size: 12px;
          color: rgba(17, 18, 24, 0.25);
          margin-right: 8px;
          cursor: pointer;
        }
        > span {
          width: 150px;
          font-size: 14px;
          font-weight: 400;
          color: #111218;
        }
      }
    }
    &::-webkit-scrollbar {
      width: 6px;
      height: 50px;
      background: rgba(17, 18, 24, 0.25);
      border-radius: 3px;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(17, 18, 24, 0.25);
      border-radius: 3px;
    }
  }
}
</style>